import { SearchInput } from '@/components/ui/SearchInput';

// SearchBox组件的props类型定义
interface SearchBoxProps {
  // 搜索输入的值
  value?: string;
  // 搜索输入变化处理函数
  onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

// 搜索框组件：包含搜索图标和输入框
// 使用React 17+自动JSX运行时，无需显式导入React
export const SearchBox = ({ value, onSearchChange }: SearchBoxProps) => {
  return (
    // 搜索区域容器
    <div className="px-5 mb-5 mt-1">
      {/* 使用SearchInput组件简化搜索框实现 */}
      <SearchInput
        placeholder="Search"
        value={value}
        onChange={onSearchChange}
      />
    </div>
  );
};
